<template>
  <el-calendar v-model="value">
    <template #date-cell="{ data }">
      <div>{{ data.day.split('-')[2] }}</div>
      <div style="margin-top: 10px; overflow-wrap: break-word; overflow: hidden" v-if="data.day === '2025-07-31'">
        <div style="display: inline-block; background-color: #2c50b9; color: #fff; margin: 0 2px; border-radius: 15px; font-size: 12px; padding: 0 10px; min-width: 38px; text-align: center">观影</div>
        <div style="display: inline-block; background-color: #2c50b9; color: #fff; margin: 0 2px; border-radius: 15px; font-size: 12px; padding: 0 10px; min-width: 38px; text-align: center">开会</div>
        <div style="display: inline-block; background-color: #2c50b9; color: #fff; margin: 0 2px; border-radius: 15px; font-size: 12px; padding: 0 10px; min-width: 38px; text-align: center">约会</div>
      </div>
    </template>
  </el-calendar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
defineOptions({
  name: 'DwCalendar',
});

const value = ref(new Date());
</script>
<style lang="scss" scoped>
.el-calendar {
  --el-calendar-cell-width: 90px;
}
</style>
